<template>
    <div class="overview">
        <button type="button" @click="addFile" class="file-btn">+ 新增文件</button>
        <ul v-for="(item, index) in fileItems" :key="index" class="file-list-ul">
            <li :title="item.filename+'.py'" @click="changeFile(item.filename, index)" :class="activeClass == index?'active':''">
                {{item.filename}}.py
                <el-dropdown  trigger="click" class="file-dropdown-bar">
                    <span class="el-dropdown-link" title="操作">
                    </span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item @click.native="handleChangeFilename(item.filename)">重命名</el-dropdown-item>
                        <el-dropdown-item @click.native="handleDownloadFile(item.filename)">下载</el-dropdown-item>
                        <el-dropdown-item @click.native="handleDeleteFile(item.filename)">删除</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </li>
        </ul>
        <div class="setfilename-bar" v-show="fileNameInput">
            <input ref="filenameInput" autofocus type="text" v-model="fileNameValue" placeholder="请输入文件名" v-on:blur="getFilename(fileNameValue)" @keyup.27="escFilename" @keyup.enter="getFilename(fileNameValue)"/>
            <span>.py</span>
        </div>
    </div>
</template>

<script>
import glbJson from "../../utils/global_variable.js"
    export default {
        name: 'leftNav',
        props:{
            pyActives:{
                type:String
            }
        },
        data(){
            return{
                activeClass:0,
                fileNameInput:false,
                fileNameValue:'',
                fileItems:glbJson.pythonJson
            }
        },
        watch:{
            fileNameInput:function (newVal) {
                if(newVal){
                    this.$nextTick(() => {
                        this.$refs.filenameInput.focus()
                    })
                }
            }
        },
        methods:{
            addFile:function(){
                this.fileNameInput = true
            },
            changeFile:function(data, index){
                this.$emit('childChangepyActive', data)
                this.activeClass = index
            },
            getFilename:function(data){
                if(data.indexOf(' ') > -1){
                    data = data.replace(/\s*/g,"");
                    if(data){
                        this.fileNameValue = data;
                    }
                }
                if(data){
                    let _isFilename = this.isFilenameInjson(glbJson.pythonJson,data)
                    if(_isFilename){
                        this.activeClass = glbJson.pythonJson.length
                        glbJson.pythonJson.push({
                            "filename":data,
                            "content":"# "+data+".py"
                        })
                        this.$emit('childChangepyActive', data)
                    }else {
                        this.$message.error('该文件名已存在，请重试')
                    }
                }
                this.fileNameInput = false
                this.fileNameValue = ''
            },
            escFilename(){
                this.fileNameInput = false
                this.fileNameValue = ''
            },
            handleChangeFilename(oldfilename){
                let _that = this;
                this.$prompt('', '请输入文件名', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    inputValue:oldfilename
                }).then(({ value }) => {
                    if(oldfilename !== value){
                        let _isFilename = _that.isFilenameInjson(glbJson.pythonJson,value)
                        if(_isFilename){
                            if(value.indexOf(' ') > -1){
                                value = value.replace(/\s*/g,"");
                                if(value){
                                    _that.fileNameValue = value;
                                }
                            }
                            var _index = _that.searchInjson(glbJson.pythonJson, oldfilename)._index
                            glbJson.pythonJson[_index].filename = value
                        }else {
                            this.$message.error('该文件名已存在，请重试');
                        }
                    }
                })
            },
            handleDeleteFile(filename){
                glbJson.pythonJson.splice(glbJson.pythonJson.findIndex(item => item.filename === filename), 1)
            },
            handleDownloadFile(filename){
                this.downloadFileInjson(filename+'.py', this.searchInjson(glbJson.pythonJson, filename).content)
            }
        }
    }
</script>
<style scoped>
    .overview {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
        width: 200px;
        -webkit-flex-shrink: 0;
        -ms-flex-negative: 0;
        flex-shrink: 0;
        background: #545f80;
        color: #fff;
    }
    .file-btn{
        display: inline-block;
        margin: 10px;
        padding: 8px;
        box-shadow: 2px 2px 2px rgba(0,0,0,.1);
        background: #ffd505;
        color: #333;
        border-radius: 3px;
        border: 0;
        cursor: pointer;
        font-style: 15px;
    }
    .file-btn:hover{
        opacity: .9;
    }
    .file-list-ul > li{
        display: block;
        position: relative;
        height: 40px;
        padding-right: 38px;
        line-height: 40px;
        padding-left: 32px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        cursor: pointer;
    }
    .file-dropdown-bar{
        position: absolute;
        right: 6px;
        top: 8px;
    }
    .file-list-ul > li .el-dropdown-link{
        border-radius: 3px;
        display: block;
        width: 25px;
        height: 25px;
        background-image: url("../../assets/sd.svg");
        background-size: 100% ;
        background-repeat: no-repeat;
    }
    .file-list-ul > li .el-dropdown-link:hover{
        background-color: #545f80;
    }
    .file-list-ul > li:hover{
        background: #46506d;
    }
    .file-list-ul > li.active{
        background: #3c4561;
    }
    .file-list-ul > li:before{
        content: '';
        display: block;
        position: absolute;
        left: 10px;
        top: 11px;
        height: 16px;
        width: 16px;
        background-image: url("../../assets/python.svg");
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    .setfilename-bar{
        position: relative;
        padding:8px 10px;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
    }
    .setfilename-bar > span{
        display: block;
        position: absolute;
        right: 10px;
        top: 8px;
        width: 40px;
        text-align: center;
        height: 34px;
        line-height: 32px;
        color: #555;
        background: #d1d1d1;
        border-radius: 0 2px 2px 0;
        z-index: 99;
    }
    input{
        outline-style: none;
        outline-width: 0px;
        text-shadow: none;
        height: 32px;
        border: 1px solid #eee;
        box-shadow: none;
        border-radius: 2px;
        padding-left: 6px;
        padding-right: 50px;
        overflow: hidden;
    }
    input:focus{
        border: 0;
        box-shadow: none;
    }
</style>
